<template>
  <div class="playbox">
    <div class="box1" @mouseover="showplay"></div>
    <div class="box2">
      <div class="btn btn1">
        <p class="btnback"></p>
        <p class="btnplay" @click="palysong" v-if="playbtn"></p>
        <p class="btnstop" @click="palysong" v-else></p>
        <p class="btnnext"></p>
      </div>
      <div class="btn btn2">
        <audio
          controls="controls"
          :src="$store.state.PlaySongsURL"
          ref="playaudio"
          style="display: none"
        ></audio>
        <div v-if="iscreat">
          <img
            :src="$store.state.PlaySongsData.al.picUrl"
            alt=""
            class="songurl"
          />
          <div class="timebox">
            <div class="namebox">
              <a class="nameboxa aname">{{
                $store.state.PlaySongsData.name
              }}</a>
              <a class="nameboxa aimg"></a>
              <a class="nameboxa aar">{{
                $store.state.PlaySongsData.ar[0].name
              }}</a>
            </div>
            <div class="time">
              <p class="t1"></p>
              <p class="t2" ref="playtime"></p>
            </div>
          </div>
        </div>
        <div v-else>
          <img
            class="nosongurl"
            src="https://s4.music.126.net/style/web2/img/default/default_album.jpg"
          />
          <div class="timebox">
            <div class="namebox">
              <a class="nameboxa aname"></a>
              <a class="nameboxa aimg"></a>
              <a class="nameboxa aar"></a>
            </div>
            <div class="time">
              <p class="t1"></p>
              <p class="t2" ref="playtime"></p>
            </div>
          </div>
        </div>
      </div>
      <div class="btn btn3"></div>
    </div>
  </div>
</template>

<script>
export default {
  setup () {},
  data () {
    return {
      songurl: '',
      playbtn: true,
      songsdata: [],
      songid: '',
      t: null,
      iscreat: false,
      widthlong: 0
    }
  },
  mounted () {
    this.getsongsdata()
    this.getsongurl()
    this.getstateurl()
    // this.getstateid();
  },
  methods: {
    // 获取本地歌曲url
    getsongurl () {
      if (localStorage.getItem('songurl')) {
        // this.$store.state.PlaySongsURL = localStorage.getItem("songurl");
        this.$store.commit(
          'ChangePlaySongsURL',
          localStorage.getItem('songurl')
        )
      }
    },
    // 播放功能
    palysong () {
      this.playbtn = !this.playbtn
      if (!this.playbtn) {
        this.$refs.playaudio.play()
        this.progress()
      } else {
        this.$refs.playaudio.pause()
        clearInterval(this.t)
      }
    },
    // 获取本地存储的歌曲信息
    getsongsdata () {
      if (localStorage.getItem('songid')) {
        // this.songid = localStorage.getItem("songid");
        this.$store.commit('ChangePlaySongsID', localStorage.getItem('songid'))
        this.maxaxios
          .get('/song/detail', { ids: this.$store.state.PlaySongsData.id })
          .then((res) => {
            // this.songsdata = res;
            this.$store.commit('ChangePlaySongsData', res.songs[0])
            this.iscreat = true
          })
      }
    },
    // 获取state的url
    getstateurl () {
      // this.$refs.playaudio.pause();
      this.$bus.$on('PlaySongs', () => {
        this.iscreat = true
        this.playbtn = false
        this.$refs.playaudio.currentTime = 0 // 重新播放
        this.$refs.playaudio.play()
        console.log('开始播放')
        clearInterval(this.t)
        this.$refs.playtime.style.width = 0

        this.widthlong = 0
        this.progress()
      })
    },

    // 播放进度条
    progress () {
      // 秒
      let time = 0
      time = parseInt(this.$store.state.PlaySongsData.dt / 1000)
      this.t = setInterval(() => {
        this.widthlong = this.widthlong + 300 / time
        this.$refs.playtime.style.width = this.widthlong + 'px'
        if (parseInt(this.widthlong) > 300) {
          clearInterval(this.t)
          this.playbtn = true
        }
      }, 1000)
    },
    // 显示播放控件
    showplay(){
      
    }
  }
}
</script>

<style scoped>
.playbox {
  z-index: 99;
  position: fixed;
  width: 100%;
  height: 50px;
  background-image: url(../../public/img/playbar.png);
  background-repeat: repeat-x;
  bottom: 0;
  background-position: 0 0;
}
.box1 {
  width: 100%;
  background-color: rgb(0, 255, 119);
  height: 10px;
}
.box2 {
  width: 1000px;
  margin: auto;
}
.box2::after {
  content: "";
  clear: both;
  display: block;
}
.btn {
  width: 300px;
  height: 50px;
  float: left;
}
.btn::after {
  content: "";
  clear: both;
  display: block;
}
.btn1 {
  width: 130px;
  /* background-color: rgb(255, 0, 170); */
}
.btn1 p {
  cursor: pointer;
}
.btnback {
  width: 28px;
  height: 28px;
  background-image: url(../../public/img/playbar.png);
  background-repeat: no-repeat;
  background-position: 0 -130px;
  float: left;
  margin-top: 5px;
  margin-left: 5px;
}
.btnplay {
  width: 36px;
  height: 36px;
  background-image: url(../../public/img/playbar.png);
  background-repeat: no-repeat;
  background-position: 0 -204px;
  float: left;
  margin: 0 5px 0 5px;
}
.btnstop {
  width: 36px;
  height: 36px;
  background-image: url(../../public/img/playbar.png);
  background-repeat: no-repeat;
  background-position: 0 -165px;
  float: left;
  margin: 0 5px 0 5px;
}
.btnnext {
  width: 28px;
  height: 28px;
  background-image: url(../../public/img/playbar.png);
  background-repeat: no-repeat;
  background-position: -80px -130px;
  float: left;
  margin-top: 5px;
}
.btn2 {
  width: 600px;
  /* background-color: rgb(255, 247, 0); */
}
.btn2::after {
  content: "";
  display: block;
  clear: both;
}
.songurl {
  width: 34px;
  height: 34px;
  /* background-color: red; */
  margin: 2px 5px 0 5px;
  float: left;
}
.nosongurl {
  width: 34px;
  height: 34px;
  /* background-color: red; */
  margin: 2px 5px 0 5px;
  float: left;
}
.timebox {
  width: 500px;
  height: 50px;
  /* background-color: rebeccapurple; */
  float: left;
}
.namebox {
  padding-left: 10px;
}
.nameboxa {
  padding: 0px 5px 0 5px;
  font-size: 12px;
}
.aname {
  color: #e8e8e8;
}
.aimg {
  display: inline-block;
}
.aar {
  color: #9b9b9b;
}
.time::after {
  clear: both;
  display: block;
  content: "";
}
.time {
  padding: 8px 0px 0 15px;
  position: relative;
}
.t1 {
  width: 300px;
  height: 2px;
  background-color: rgb(221, 207, 207);
  /* float: left; */
  position: absolute;
}
.t2 {
  width: 0;
  height: 2px;
  background-color: rgb(117, 6, 6);
  /* float: left; */
  position: absolute;
}
.btn3 {
  width: 200px;
  background-color: rgb(0, 17, 255);
}
</style>
